How to get a high resolution image from Google Maps
Someone I know has asked me if I there is a way to get a high resolution image of a map for research. There are many legitimate applications of this information, but make sure you’re not breaching Google Maps/Earth terms of use before you proceed.
TL;DR #
You can save high resolution images by embedding a huge map to an empty HTML page and using a browser extension that cab capture a whole website.
Step by step instructions #
Software required: #
- Any text editor
- A web browser
- Latest version of Firefox or a Nimbus Screenshot browser extension
- Adobe Photoshop (optional)
Steps #
Find the object of interest #
Find the map you’d like to capture on Google Maps. I’ll use La Gomera island as an example. Center the object in the center of the screen.
Get the embed code #
Go to Menu -> Share or embed map. The embed HTML code looks something like this:
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d160176.14910393147!2d-17.228724827790487!3d28.10296280640935!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e1!3m2!1sen!2suk!4v1438205320904" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
Put the embed code into an empty HTML document #
Fire up any text editor and paste the the embed code in there. Wrap it in basic HTML elements.
<html>
<body>
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d160176.14910393147!2d-17.228724827790487!3d28.10296280640935!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e1!3m2!1sen!2suk!4v1438205320904" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</body>
</html>
Save the file with an html extension e.g. map.html. Open it in a browser. You should see nothing but the map with your object of interest now.
Adjust the size and detail of the map #
This step may require a few iterations.
You want to make the map huge to get a big resolution image with all the details. You can do this by tweaking the width and height attributes on the iframe element. Here I set it to 4000x3000
<html>
<body>
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d160176.14910393147!2d-17.228724827790487!3d28.10296280640935!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e1!3m2!1sen!2suk!4v1438205320904" width="4000" height="3000" frameborder="0" style="border:0" allowfullscreen></iframe>
</body>
</html>
Save and open the file in the browser again. The map most likely won’t fit on the screen. Use map controls to zoom in or out. To make this easier, you can temporarily make the whole page smaller by zooming out using browser controls (Ctrl -/Cmd - to zoom out).
Change the width and height parameters until your'e happy with the level of detail. I would not suggest resolutions bigger than 6000x6000 as the next step may fail if the image is too big.
Save the image #
If you use Firefox, use its ability to capture full page.
Alternatively, install the Nimbus Screenshot browser extension. Make sure your browser is not zoomed out (Ctrl 0/Cmd 0 to reset zoom). Capture the whole page with the browser extension. It will automatically scroll the page with the map taking screenshots of each view and stitching them together. Remove your mouse pointer from the screen, don’t scroll anything and keep the browser tab in focus.
When it’s done it will open a new tab with the image preview. Click done and save the image as png.
All done!
If the map is still too small #
If you’re hitting the file size limit and the browser extension can’t cope with the resolution of the map reduce the width and height settings in HTML code and take a few images with a bigger zoom level. You can then stitch them together into a single image using photo editing software.
Photoshop makes it easy if you use Automate -> Merge feature (instructions here).
Let me know how it goes on twitter